<template>
  <div>
    <!-- 内容 -->
    <div v-if="bool">
      <!-- 头部 -->
      <van-row class="header4" gutter="20">
        <van-col span="2">
          <van-icon name="arrow-left" @click="$router.go(-1)" />
        </van-col>
        <van-col span="18">
          <span>拜访记录</span>
        </van-col>
        <van-col span="4" @click="jump1">
          <span>新增</span>
        </van-col>
      </van-row>
      <!-- 搜索框 -->
      <van-search
        v-model="value"
        show-action
        shape="round"
        placeholder="客户名称/拜访标题"
        @search="onSearch"
      >
        <template #action>
          <div class="fontsiz" @click="onSearch">搜索</div>
        </template>
      </van-search>
      <!-- 下方列表 -->
      <div class="describe">
        <div class="xaing" @click="jump">
          <ul>
            <li>
              <div class="dt">
                <img :src="img01" alt="" />
              </div>
              <div class="dd">
                <p>
                  <span>拜访标题</span>
                  <i>重要商务会议拜访</i>
                </p>
                <p>
                  <span>客户名称</span>
                  <i>林丹</i>
                </p>
                <p>
                  <span>拜访时间</span>
                  <i>2018-10-25 14:30</i>
                </p>
              </div>
              <van-button plain type="primary" size="mini" color="#fd9418">定期回访</van-button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <VistXiang v-else  @chan="chan"/>
  </div>
</template>

<script>
import {GetVistList} from "@/request/api"
import VistXiang from "../components/VistXiang"
export default {
  data() {
    return {
      value: "",
      img01: "https://img01.yzcdn.cn/vant/custom-empty-image.png",
      records: [],
      bool : true
    };
  },
  methods: {
    onSearch() {},
    jump(){
        this.bool = false
    },
    chan(){
        this.bool = true
    },
    jump1(){
        this.$router.push('/NewVist')
    }
  },
  created(){
      GetVistList({
          keyword : "重要商务会议拜访",
          current:"1",
          size:"10"
      }).then(res=>{
          console.log(res);
      })
  },
  components : {
      VistXiang
  }
};
</script>
 
<style lang = "less" scoped>
.header4 {
  background-color: #003399;
  color: #fff;
  padding: 0.166667rem 0.066667rem;
  text-align: center;
  display: flex;

  .van-icon {
    font-size: 0.186667rem;
    vertical-align: -0.056667rem;
  }
}
.fontsiz {
  color: #003399;
}
.xaing {
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  ul {
    li {
      display: flex;
      padding: .133333rem;

      .dt {
        margin-top: .05rem;
        width: 20%;
        padding: 0 0.066667rem;
        box-sizing: border-box;
        img {
          width: 100%;
        }
      }
      .dd {
          width: 55%;
        margin: 0.066667rem;
        p {
          margin: 0.036667rem;
          i {
            font-weight: 600;
            margin-left: 0.126667rem;
          }
        }
        .p2 {
          font-weight: 600;
        }
      }
      .van-button{
          background-color: #fff7e7;
      }
    }
  }
}
.describe {
  background-color: #fff;
  margin-top: 0.133333rem;
  box-sizing: border-box;
  font-size: .133333rem;
  .p1 {
    line-height: 0.32rem;
    padding: 0.066667rem;
    margin: 0;
  }
  .van-icon {
    margin: 0.15667rem;
  }
}
</style>